<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head">

</head>
<body class="hold-transition sidebar-mini layout-fixed">
	<div class="wrapper">

		<!-- Navbar -->
		<nav
			class="main-header navbar navbar-expand navbar-white navbar-light">
			<!-- Left navbar links -->
			<ul class="navbar-nav">
				<li class="nav-item"><a class="nav-link" data-widget="pushmenu"
					href="#"><i class="fas fa-bars"></i></a></li>
				<li class="nav-item d-none d-sm-inline-block"><a
					th:href="${#httpServletRequest.contextPath}+'/'" class="nav-link">首页</a></li>

			</ul>


			<!-- Right navbar links -->
			<ul class="navbar-nav ml-auto">

				<li class="nav-item"  style=" margin-right: 10px;margin-top: 4px;">

				</li>
				<li class="nav-item">
					<form th:action="@{/logout}" method="post" style="margin-top: 4px;">
						<input type="submit" class="btn btn-primary btn-sm" value="注销" />
					</form>
				</li>
			</ul>
		</nav>
		<!-- /.navbar -->
		<div class="pro">
			<div class="progress progress-xxs">
				<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
				  <span class="sr-only">60% Complete (warning)</span>
				</div>
			  </div>
		</div>
		<!-- Main Sidebar Container -->
		<aside class="main-sidebar sidebar-dark-primary elevation-4">
			<!-- Brand Logo -->
			<a href="#" class="brand-link"> <img
				src="dist/img/AdminLTELogo.png" alt="药佳保管理系统"
				class="brand-image img-circle elevation-3" style="opacity: .8">
				<span class="brand-text font-weight-light">药佳保管理系统</span>
			</a>

			<!-- Sidebar -->
			<div class="sidebar">
				<!-- Sidebar user panel (optional) -->
				<div class="user-panel mt-3 pb-3 mb-3 d-flex">
					<div class="image">
						<img src="dist/img/head.png"
							class="img-circle elevation-2" alt="User Image">
					</div>
					<div class="info">
						<a href="#" class="d-block" th:text=${userBean.username}></a>
					</div>
				</div>

				<!-- Sidebar Menu -->
				<nav class="mt-2">
					<ul class="nav nav-pills nav-sidebar flex-column text-sm nav-child-indent"
						data-widget="treeview" role="menu" data-accordion="false">

						<li th:each="menu,menuState : ${menuVo.list}"
							th:class="${#lists.isEmpty(menu.list)}?'nav-item ':'nav-item has-treeview '">
							<a href="javascript:;" class="nav-link" th:size="${#lists.isEmpty(menu.list)}?0:${#lists.size(menu.list)}" th:url="${#httpServletRequest.contextPath}+${menu.url}" data-level="1"> <i
								th:class="'cus-font cus-font'+${menuState.index}"></i>
								<p>
									<span th:text="${menu.name}"></span> <i
										class="right fas fa-angle-left"
										th:if="${not #lists.isEmpty(menu.list)}"></i>
								</p>
						</a>
							<ul class="nav nav-treeview"
								th:if="${not #lists.isEmpty(menu.list)}">
								<li th:each="menu2 : ${menu.list}"
									th:class="${#lists.isEmpty(menu2.list)}?'nav-item':'nav-item has-treeview'">
									<a href="javascript:;" class="nav-link" th:size="${#lists.isEmpty(menu2.list)}?0:${#lists.size(menu2.list)}" th:url="${#httpServletRequest.contextPath}+${menu2.url}" data-level="2"> <i
										class="icon-second-third icon-second-third-second"></i>
										<p>
											<span th:text="${menu2.name}"></span> <i
												class="right fas fa-angle-left"
												th:if="${not #lists.isEmpty(menu2.list)}"></i>
										</p>
								</a>
									<ul class="nav nav-treeview"
										th:if="${not #lists.isEmpty(menu.list)}">
										<li th:each="menu3 : ${menu2.list}"><a
											href="javascript:;" class="nav-link" th:size="-1" th:url="${#httpServletRequest.contextPath}+${menu3.url}" data-level="3"> <i
												class="icon-second-third icon-second-third-third"></i>
												<p>
													<span th:text="${menu3.name}"></span>
												</p>
										</a></li>
									</ul>
								</li>
							</ul>
						</li>

					</ul>
				</nav>
				<!-- /.sidebar-menu -->
			</div>
			<!-- /.sidebar -->
		</aside>

		<!-- Content Wrapper. Contains page content -->
		<iframe th:src="${#httpServletRequest.contextPath}+'/welcome'" style="border: 0; width: 100%;" id="iframe"></iframe>


		<!-- /.content-wrapper -->
		<footer class="main-footer">
			<strong><span th:text="'Copyright &copy; 2014-'+${year}"></span>
<!-- 			<a href="http://www.simmytech.com">魔盒管理系统</a>. -->
			</strong> All rights reserved.
			<div class="float-right d-none d-sm-inline-block">
				<b>Version</b> 1.0.0
			</div>
		</footer>

		<!-- Control Sidebar -->
		<aside class="control-sidebar control-sidebar-dark">
			<!-- Control sidebar content goes here -->
		</aside>
		<!-- /.control-sidebar -->
	</div>
	<!-- ./wrapper -->
	<div th:include="include/foot"></div>

	<script  th:inline="javascript">
	function   suec(mess){
    	layer.msg(mess, {icon: 1})
	}
		let p=0;
		let d=false;
		$().ready(function() {
			$("#iframe").attr('height', ($(document).height() - 120) + 'px');
			$("#iframe").on('load',function(){
				d=true;
				$(".progress-bar").css('width','100%');
				$(".pro").hide();
			});
			$(".nav-link").click(function(e) {
				let that=$(this);
				let url = that.attr('url');
				let size=that.attr('size');
				if (size<=0) {
					p=0;
					d=false;
					$(".progress-bar").css('width','0%');
					$(".pro").show();
					pro();
					$("#iframe").attr('src', url);
					cleanActive();
					setActive(that,size);
				}
			});
			$("#editpass").click(function(e) {
				 layer.open({
				        type: 2, 
				        closeBtn:0,
				        title: false, 
				        area: ['400px', '370px'],
				        content: [[${#httpServletRequest.contextPath}]]+'/systUser/edit',
				      });
			});
			cleanActive=function(){
				$(".nav-link").each(function(i,e){
					$(e).removeClass('active')
				});
			},
			setActive=function(e,size){
				if(size==0){
					e.addClass('active');
				}
				if(e.data('level')==3){
					e.parent().parent().prev().addClass('active');
					e.parent().parent().parent().parent().prev().addClass('active');
				}else if(e.data('level')==2){
					e.parent().parent().prev().addClass('active');	
				}
				
			}
			
		});
		pro=function(){
				p=p+10;
				
				$(".progress-bar").css('width',p+'%');
				if(p<100&&!d){
					setTimeout(function(){
						this.pro();
					},10);
				}
			}
		loadPage=function(){
			console.log('loadPage');
			p=0;
			d=false;
			$(".progress-bar").css('width','0%');
			$(".pro").show();
			pro();
		}
	</script>

</body>
</html>
